<template>
    <div class="single-card-container">
        <v-chip v-for="card in cards" size="large" class="ma-2 chip-card" :key="card" label
            :color="getChipColors(card)">
            {{ card }}
        </v-chip>
    </div>
</template>

<script setup lang="ts">
import { getChipColors } from '../../utils/card-game.util'

defineProps<{ cards: string[] }>()
</script>

<style scoped lang="scss">
.single-card-container {
    :deep(.chip-card) {
        height: 90px;
        width: 70px;
        border-radius: 10px;
        margin-bottom: 10px;
        font-weight: bolder;
        font-size: 1.5rem;
    }


}
</style>